<template>
  <div>
    <top-simple-search @searchFun="query" @addFun="handleAdd">
      <el-form-item label="状态">
        <dict-select v-model="formData.is_draft" placeholder="请选择状态" dist-key="bx_state"></dict-select>
      </el-form-item>

      <!--      <el-form-item label="状态">-->
      <!--        <el-select v-model="formData.is_draft" clearable>-->
      <!--          <el-option label="待接单" :value="0"></el-option>-->
      <!--          <el-option label="待维修" :value="4"></el-option>-->
      <!--          <el-option label="已维修" :value="5"></el-option>-->
      <!--          <el-option label="已完成" :value="6"></el-option>-->
      <!--          <el-option label="已评价" :value="7"></el-option>-->
      <!--          <el-option label="已取消" :value="8"></el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->


      <el-form-item label="预约时间">
        <el-date-picker
          v-model="formData.start_time"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="请选择开始时间"
          size="small"
          clearable
          style="margin-right: 10px;width: 180px"
        ></el-date-picker>
        <el-date-picker
          v-model="formData.end_time"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="请选择结束时间"
          size="small"
          clearable
          style="margin-right: 10px;width: 180px"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="提交时间">
        <el-date-picker
          v-model="formData.start_time2"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="请选择开始时间"
          size="small"
          clearable
          style="margin-right: 10px;width: 180px"
        ></el-date-picker>
        <el-date-picker
          v-model="formData.end_time2"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="请选择结束时间"
          size="small"
          clearable
          style="margin-right: 10px;width: 180px"
        ></el-date-picker>
      </el-form-item>
    </top-simple-search>
    <dynamic-table ref="myTable" :params="params" v-bind="$attrs" :config="config">
      <template slot-scope="{row}">
        <chuli-button @click="toHandle(row)" v-if="isTodo"></chuli-button>
        <detail-button @click="toView(row)" v-else></detail-button>
        <my-button handle="Create" v-if="row.cancel_flag" @click="toCancel(row)">取消</my-button>
      </template>
    </dynamic-table>

  </div>
</template>
<script>
  import address from "@/api/onlineRepair/address/index"
  import MyLink from "@/components/MyLink/index";
  import ExtendTable from "@/mixins/ExtendTable";
  import DynamicTable from "@/components/Common/DynamicTable";
  import DictSelect from "@/components/DictSelect/index";

  export default {
    name: "ListTable",
    components: {DynamicTable, MyLink, DictSelect},
    props: ["params", "appFun"],
    mixins: [ExtendTable],
    data() {
      return {
        config: [],
        xqList: [],
      }
    },

    created() {
      const config = require(`./tableconfig.js`);
      this.config = config.default.column
      this.getXqList()
    },
    computed: {
      isDraft() {
        return this.params.is_draft
      },
      isTodo() {
        return this.params.category == 'duty' || this.params.category == 'jiedan'
      },
      isYiban() {
        return this.params.category == 'relation'
      },
      isFaqi() {
        return this.params.category == 'owner'
      },
    },
    methods: {
      getXqList() {
        address.getList({level: 0}).then(res => {
          this.xqList = res.data
        })
      },
      loadComplete(data) {
      }
    }
  }
</script>
<style lang="scss" scoped>
  .fwh {
    ::v-deep.el-input__inner {
      padding: 0 8px;
    }

    ::v-deep.el-input__suffix {
      right: 0px;
    }
  }

</style>
